<template>
	<div class="progressDemo" :style="'width: '+showList[0].width+'px;height: '+showList[0].height+'px;'">

		<svg v-for="(item, index) in showList"
			:style="'width: '+item.width+'px;height: '+item.height+'px;stroke-dasharray: '+circleLang+'px,295px'"
			viewBox="0 0 100 100">
			<path d="
       M 50 50
       m 0 50
       a 50 50 0 1 1 0 -100
       a 50 50 0 1 1 0 100
       " :stroke="item.bgColor" :stroke-width="4" fill="none" stroke-linecap="round" class="circle_track"></path>

			<path d="
       M 50 50
       m 0 50
       a 50 50 0 1 1 0 -100
       a 50 50 0 1 1 0 100
       " :stroke="item.strokeColor" fill="none" stroke-linecap="round" :stroke-width="item.strokeWidth"
				class="circle_path" :style="'stroke-dasharray: '+item.dasharray+'px,295px'"></path>
		</svg>


		<div class="detailShow" style="top: 45%;">
			<p style="font-size: 34px; font-weight: bold;">{{list}}</p>
			<p style="font-size: 13px; font-weight: bold; line-height: 25px;">理财评分</p>
		</div>

		<div class="degreeShow" style='width: 100%; height: 100%;'>
			<span style="left: 12%; bottom: 37%;">{{totel * 0}}</span>
			<span style="left: 50%; top: 10%;">{{totel * 0.5}}</span>
			<span style="right: 0; bottom: 37%;">{{totel * 1}}</span>
		</div>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				totel: 1000, // 总的数据
				list: 766, // 每一个环形的数据
				dasharray: 6, // 每个环形的宽度
				// 圆环相关数据
				showList: [{
					name: 'A', // 名称
					dasharray: 0, // 当前的数据
					strokeWidth: 0, // 圆环的线宽度
					width: 186, // 圆环宽度
					height: 186, // 圆环高度
					top: 50, // 圆环位置
					left: 50,
					zIndex: 3,
					bgColor: '#e5e9f2', // 底层圆环颜色
					strokeColor: '#0055ff' // 上层圆环颜色
				}],
				circleLang: 175 // stroke-dasharray
			}
		},
		created() {
			// 页面刷新加载圆环数据，从无到有体现动画效果
			setTimeout((e) => {
				for (let x = 0; x < this.showList.length; x++) {
					this.$set(this.showList[x], 'dasharray', this.list / this.totel * this.circleLang)
					if (this.list / this.totel * this.circleLang === 0) {
						this.$set(this.showList[x], 'strokeWidth', 0)
					} else {
						this.$set(this.showList[x], 'strokeWidth', this.dasharray)
					}
				}
			}, 500)
		}
	}
</script>

<style scoped>
	.progressDemo {
		position: relative;
		margin: 0 auto;
		top: 20px;
	}

	.circle_track {
		stroke-dashoffset: -70px;
	}

	.circle_path {
		stroke-dashoffset: -70px;
		transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
	}

	svg {
		overflow: initial;
		position: absolute;
	}

	.detailShow,
	.degreeShow {
		position: absolute;
		z-index: 100;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		color: #0055ff;
	}

	.detailShow p {
		padding: 0;
		margin: 0;
		line-height: 1;
		font-size: 14px;
		text-align: center;

	}

	.degreeShow span {
		position: absolute;
		font-size: 12px;
		color: gray;
		transform: translateX(-50%) translateY(-50%);
	}
</style>
